<template>
	<view class="content">
		<view class="header">
			<view class="nav-top">
					<!-- 搜索-->
					<view class="nav-content">
						<icon class="search" type="search" @click="toSearch" size="15"/>
						<view class="inter" @click="toSearch" >请输入搜索的关键词</view>
						<!-- <icon class="close" type="clear" @click="keyword=null" size="15"/> -->
					</view>
			</view>
			<view class="nav">
				<view class="nav-item" @click="showAreaPicker">
					<view class="nav-item-name">
						{{areaPickerDefaultName}}
					</view> 
				<img src="/static/images/icon/arrowD.png" alt="" class="arrowD">
				</view>
			</view>
		</view>
		<!-- 人物榜 -->
		<!-- <view class="rank-tit">人物云集</view> -->
		<view class="rank">
			<view class="rank-list"  v-for="(item,index) in personCloud" :key="index" @click="toPersonDetail(item)">
					<view class="rank-item">
						<view class="imgs">
							<image class="persons" :src="item.img_url" ></image>
						</view>
					
						<view class="rank-item-desc">
							<view class="rank-item-desc-name">{{item.name}}</view>
							<view class="rank-item-desc-title">
								{{item.desc==null?item.name:item.desc}}
							</view>
							<view class="icon">
								<!-- <view class="left" v-if="item.province&&item.city">
									{{item.province==null?'':item.province}}{{item.city==null?'':item.city}}
								</view>
								
								<view class="left" v-else>
									暂无地址
								</view> -->
								<view class="right">
									<view class="num">{{item.like_num}}</view>
									<image src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/mingmei/smallicon/icon/liked.png" v-if="item.is_already_like==1" mode="widthFix" @click.stop="sendLike(item.id,index)"></image>	
									<image src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/mingmei/smallicon/icon/hand.png" v-else mode="widthFix" @click.stop="sendLike(item.id,index)"></image>	
								</view>
							</view>
						</view>
					</view>
			</view>
			<!-- <view class="null">
				暂无数据~~
			</view> -->
		</view>
		<view class="picker-wrapper">
			<!-- //行业选择 -->
			<!-- <mpvue-picker :themeColor="themeColor" ref="industryPicker" mode="selector" :deepLength="1" :pickerValueDefault="indusryPickerDefault"
				 @onConfirm="selectIndustry"  :pickerValueArray="industryArray"></mpvue-picker> -->
				 
				<!-- //区域二级选择 -->
			<mpvue-picker :themeColor="themeColor" ref="areaPicker" mode="multiLinkageSelector" :deepLength="2" :pickerValueDefault="areaPickerDefault"
				 @onConfirm="selectArea"  :pickerValueArray="areaArray"></mpvue-picker>
		</view>
		<!-- 人物榜 end -->
		<view class="total">
			<text>{{personCloud.length}}/{{total.total}}</text>
		</view>
		
		<navBar></navBar>
	</view>
</template>

<script>
	import mpvuePicker from '@/components/mpvue-picker/mpvuePicker.vue';
	import navBar from '@/pages/components/navBar/index.vue';
	import CITYDATA from '../../common/city.data.js';
	export default {
		data() {
			return {
				page:1,
				limit:6,
				personCloud:'',//人物云集
				navBarIndex:'',//自定义导航索引
				sendLikes:'',
				total:'',
				keyword: '',
				
				themeColor: '#0180CF',
				areaPickerDefault: [0, 0],//区域的初始值
				areaPickerDefaultName:'地区',
				areaName:'',//地区名
				areaArray:CITYDATA,//区域的数据
			}
		},
		components:{
			navBar,mpvuePicker
		},
		onShow() {
			getApp().globalData.navBarIndex=3;
		},
		onLoad(){
			this.getCharacterList();
		},
		onPullDownRefresh(){
			this.keyword = '';
			this.areaName = '';
			this.page=1;
			this.personCloud=[];
			this.getCharacterList()
		},
		methods: {
			showAreaPicker(){
				this.$refs.areaPicker.show()
			},
			selectArea(val){
				//选择地区
				
				let totalName=val.label;
				this.areaName=totalName.split('-')[1];
				this.areaPickerDefaultName=this.areaName=='全部'?'地区':this.areaName;
				this.page=1;
				this.personCloud=[];
				this.getCharacterList();
			},
			toSearch(){
				uni.navigateTo({
					url:`/pages/search/index`
				})
				// this.page = 1;
				// this.getCharacterList();
			},
			async getCharacterList(){
				//获取人物云集
				const param = {
					keyword: this.keyword,
					city:this.areaName=='全部'?'':this.areaName,
					page:this.page,
					limit:this.limit,
					user_token:uni.getStorageSync('userToken')
				}
				// wx.showLoading({
				// 	mask:true,
				// 	title:'加载中'
				// })
				let res=await this.$api.getCharacterList(param)
				if(res.data.level=='success'){
					uni.stopPullDownRefresh();
					if(param.page==1){
						this.personCloud = res.data.data;
					}else{
						this.personCloud=this.personCloud.concat(res.data.data)
					}
					this.total=res.data.page_info;
				}
				// wx.hideLoading()
			},
			
			async sendLike(id,index){
				//获取点赞
				let  param ={
					character_id:id,
					user_token:uni.getStorageSync('userToken')
				}
				// console.log('param',param)
				let res=await this.$api.sendLike(param)
				if(res.data.level=='success'){
					uni.showToast({
						icon: 'success',
						title: res.data.message,
						duration: 1500
					});
					let str = this.personCloud;
					str[index].is_already_like = 1;
					str[index].like_num++;
					this.personCloud = [];
					this.personCloud = str;
				}else{
					uni.showToast({
						icon: 'none',
						title: res.data.message,
						duration: 1500
					});
				}
			},
			
			toPersonDetail(item){
				//跳转人物详情
				uni.navigateTo({
					url:`/pages/personDetail/index?personId=${item.id}`
				})
			}
		},
		onReachBottom(){
			if(this.page<Math.ceil(this.total.total/this.total.limit)){
				this.page++;
				this.getCharacterList()
			}else{
				uni.showToast({
					icon: 'none',
					title: '已经到底~~'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import'~@/common/scss/common.scss';
	page{
			background: #ededed;
	}
	.header{
		position: fixed;
		z-index: 100;
		top: 0;
		left: 0;
		width: 100vw;
		.nav{
			padding:20rpx 0;
			background: #fff;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content:space-around;
			.nav-item{
				display: flex;
				align-items: center;
				width:50%;
				justify-content: center;
				image{
					margin-left:10rpx ;
					width:20rpx;
					height: 15rpx;
				}
				&:last-child{
					margin-left:40rpx;
				}
				.nav-item-name{
					max-width: 200rpx;
					@include  ellipsis(1)
				}
			}
		}
		.nav-top{
			background-image: linear-gradient(-135deg, #57D1E2 0%, #37AED6 100%);
			padding: 30rpx;
			color: #fff;
			// 搜索
			.nav-content{
				width: 100%;
				position: relative;
				.search{
					position: absolute;
					top: 15rpx;
					left: 10rpx;
					z-index: 100;
				}
				.close{
					position: absolute;
					top: 20rpx;
					right: 10rpx;
					z-index: 100;
				}
				input{
					font-size: 30rpx;
					padding: 10rpx 50rpx;
					background: #fff;
					color: #666;
					border-radius: 10rpx;
				}
			}
		}
	}
	.content{
		padding: 210rpx 0 130rpx 0;
		min-height: calc(100vh - 340rpx);
	}
	.rank-tit{
		// margin:20rpx 0;
		font-weight: 600;
		padding: 20rpx;
		border-top: 1rpx solid #ccc;
	}
	//人物榜
	.inter{
		font-size: 30rpx;
		padding: 10rpx 60rpx;
		background: #fff;
		color: #666;
		border-radius: 10rpx;
	}
	.rank{
		overflow: hidden;
		background: #ededed;
		padding: 30rpx;
		min-height: calc(100vw - 370rpx);
	}
	.rank-list{
		width:  calc((100vw - 90rpx)/2);
		float: left;
		border-radius: 20rpx;
		overflow: hidden;
		// height: 500rpx;
		background: #fff;
		position: relative;
		&:nth-child(even){
			margin: 0 0 30rpx 30rpx;
		}
	}
	.imgs{
		// width: calc(100% - 60rpx);
		width: 100%;
		height: 240rpx;
		// padding: 30rpx;
		overflow: hidden;
	}
	.persons{
		height: 100%;
		width: 100%;
	}
	.rank-item-desc-name{
		font-weight: 600;
		width: 100%;
		font-size: 36rpx;
		text-indent: 30rpx;
		// padding: 20rpx 0;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	.rank-item-desc-title{
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		width: 100%;
		font-size: 28rpx;
		text-indent: 30rpx;
		color: #737373;
		padding-top: 20rpx;
	}
	.rank-item-desc-intro{
		width: 100%;
		font-size: 30rpx;
		text-indent: 30rpx;
		// padding: 20rpx 0;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	
	//人物云集
	.gather{
		width:100%;
		display: flex;
		flex-wrap: wrap;
		.gather-item{
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			width:49%;
			margin:10rpx 0;
			box-sizing: border-box;
			padding:0 10rpx;
			position: relative;
			image{
				width:320rpx;
				height: 200rpx;
				border-radius: 10rpx;
			}
			&-name{
				width:100%;
			}
			&-intro{
				width:100%;
				@include ellipsis(2);
			}
		}
	}
	.rank-item-desc{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		// height: calc(100% - 360rpx);
		padding: 0 0 30rpx 0;
	}
	.icon{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		margin-top: 20rpx;
		padding: 0 20rpx;
		width: calc(100% - 40rpx);
		.left{
			max-width: 60%;
			height: 50rpx;
			line-height: 50rpx;
			font-size: 28rpx;
			color: #555555;
		}
		.right{
			margin-left: auto;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: flex-start;
		}
	}
	.icon image{
		width: 30rpx;
		height: 30rpx;
	}
	.num{
		position: absolute;
		right: 60rpx;
		font-size: 30rpx;
		color: #666;
		line-height: 30rpx;
	}
	.total{
		position: fixed;
		bottom: 120rpx;
		right: 40%;
		margin: 0 auto;
		background: #fff;
		border-radius: 5rpx;
		padding: 10rpx;
		border: 1rpx solid #ccc;
		width: 150rpx;
		text-align: center;
		font-size: 30rpx;
	}
</style>
